<template>
  <div id="data-view">
    <dv-full-screen-container>

      <top-header />
      <div class="box">
        <div class="left">
          <left-fragment />
        </div>
        <div  class="center">
          <middle-fragment />
        </div>
        <div  class="right">
            <right-fragment />
        </div>

      </div>

      <!-- <div class="main-content">
        <digital-flop />

        <div class="block-left-right-content">
          <ranking-board />

          <div class="block-top-bottom-content">
            <div class="block-top-content">
              <rose-chart />

              <water-level-chart />

              <scroll-board />
            </div>

            <cards />
          </div>
        </div>
      </div> -->
    </dv-full-screen-container>
  </div>
</template>

<script>
import topHeader from './fragments/topHeader'
// left
import leftFragment from './fragments/left/index'
import middleFragment from './fragments/middle/index'
import rightFragment from './fragments/right/index'

// import digitalFlop from './digitalFlop'
// import rankingBoard from './rankingBoard'
// import roseChart from './roseChart'
// import waterLevelChart from './waterLevelChart'
// import scrollBoard from './scrollBoard'
// import cards from './cards'

var moment = require('moment')
moment.locale('zh-cn')

export default {
  name: 'DataView',
  components: {
    topHeader,
    leftFragment,
    middleFragment,
    rightFragment
    // digitalFlop,
    // rankingBoard,
    // roseChart,
    // waterLevelChart,
    // scrollBoard,
    // cards
  },
  data () {
    return {
      flowDasht: {
        app: 0,
        jx: 0,
        service: 0,
        times: 0,
        user: 0
      }
    }
  },
  provide () {
    return {
      rootThis: this
    }
  },
  computed: {
    kindsData () {
      const { flowDash, serviceData, serviceTop } = this
      return { flowDash, serviceData, serviceTop }
    },
    flowDash () {
      const { app, jx, service, times, user } = this.flowDasht
      return {
        title: '',
        data: [
          {
            label: '应用数量',
            value: 25 + app
          },
          {
            label: '镜像数量',
            value: 32 + jx
          },
          {
            label: '服务实例',
            value: 54 + service
          },
          {
            label: '服务次数',
            value: 1 + times
          },
          {
            label: '租户数量',
            value: 67 + user
          }
        ]
      }
    },
    serviceData () {
      return {
        title: '服务申请情况',
        summary: {
          haved: 3233,
          waited: 3589
        },
        data: [
          {
            label: '应用管理',
            status: '0'
          },
          {
            label: '配置管理',
            status: '0'
          },
          {
            label: '业务网关',
            status: '1'
          },
          {
            label: '定时任务',
            status: '1'
          },
          {
            label: '集群管理',
            status: '1'
          },
          {
            label: '部署日志',
            status: '1'
          },
          {
            label: '告警规则',
            status: '1'
          },
          {
            label: '性能警告',
            status: '1'
          }
        ]
      }
    },
    serviceTop () {
      return {
        title: '服务TOP 10',
        data: [
          {
            name: '应用管理',
            value: '233455'
          },
          {
            name: '配置管理',
            value: '231455'
          },
          {
            name: '业务网关',
            value: '213455'
          },
          {
            name: '定时任务',
            value: '193455'
          },
          {
            name: '集群管理',
            value: '183455'
          },
          {
            name: '部署日志',
            value: '172455'
          },
          {
            name: '部署日志1',
            value: '171455'
          },
          {
            name: '部署日志2',
            value: '162455'
          },
          {
            name: '部署日志3',
            value: '152455'
          },
          {
            name: '告警规则',
            value: '133455'
          },
          {
            name: '性能警告',
            value: '7890'
          }
        ]
      }
    },
    monitorData () {
      const date = moment(new Date()).format('YYYY-MM-DD hh:mm:ss')
      return {
        title: '监控预警',
        data: [
          {
            title: '微服务应用-服务网关',
            desc: '内存占用率过高',
            date
          },
          {
            title: '微服务应用-服务网关',
            desc: 'CPU占用率过高',
            date
          },
          {
            title: '网签应用',
            desc: 'CPU占用率过高',
            date
          }
        ]
      }
    },
    allana () {
      return {
        title: '整体趋势分析',
        data: [1200, 2230, 1900, 2100, 3500, 4200, 3985, 1200, 2230, 1900, 2100, 3500, 4200, 3985, 1200, 2230, 1900, 2100, 3500, 4200, 3985, 1200, 2230, 1900, 2100, 3500, 4200, 3985, 2345, 5612]
      }
    },
    monthana () {
      return {
        title: '近30天使用情况分析',
        data: [1200, 2230, 1900, 2100, 3500, 4200, 3985, 1200, 2230, 1900, 2100, 3500, 4200, 3985, 1200, 2230, 1900, 2100, 3500, 4200, 3985, 1200, 2230, 1900, 2100, 3500, 4200, 3985, 2345, 5612]
      }
    }
  }
}
</script>

<style lang="less">
#data-view {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;

  #dv-full-screen-container {
    background-image: url('./img/bg.png');
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }

  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .block-left-right-content {
    flex: 1;
    display: flex;
    margin-top: 20px;
  }

  .block-top-bottom-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-left: 20px;
  }

  .block-top-content {
    height: 55%;
    display: flex;
    flex-grow: 0;
    box-sizing: border-box;
    padding-bottom: 20px;
  }
  .left, .right{
    flex:1
  }
  .center{
    flex:2
  }
  .box{
    display:flex;
  }
}
</style>
